<!-- Datatables -->
<link href="cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"/>
<link href="/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet"/>

<div id="applyTest" class="widthcolumn3-one clearfix">
    <h2 class="heading2" style="margin-left: 45%;margin-top: 3%">学生成绩</h2>
    <table id="modelTable" class="table table-striped table-bordered"
           style="width:100%">
        <thead>
        <tr>
            <th>试卷类型</th>
            <th>试卷总分</th>
            <th>最终得分</th>
            <th>考试时长</th>
            <th>实际用时</th>
        </tr>
        </thead>
        <tbody style="text-align: center;">
        </tbody>
    </table>
</div>


<!-- Datatables -->
<script src="/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

<script type="text/javascript">
    var applyTestVue = new Vue({
        el:"#applyTest",
        data:{
            dataModel:{
                // id:"",
                subject:"",
                totalScore:"",
                score:"",
                totalTime:"",
                spendTime:""
            },

            // 默认页长
            defaultPageSize: 5,
            // 定义searchBean
            searchBean: {
                currentPage: 1,
                pageSize: 5,
                orderBy: "id",
                direction: "asc",
                keyWord: "",
            },
            // 定义表格数据结构
            tableData: {
                draw: 0,
                recordsTotal: 0,
                recordsFiltered: 0,
                data: [],
            },

        },
        methods: {
            // 行数据结构定义函数
            rowData: function ( subject, totalScore, score, totalTime, spendTime ) {
                //新创建一个行的js对象
                var row = {};
                // row.id = id;
                row.subject = subject;
                row.totalScore = totalScore;
                row.score = score;
                row.totalTime = totalTime;
                row.spendTime = spendTime;
                // row.operate = function () {
                //     return (
                //         "<a onclick='insertApproval(this)' href='#' class='btn_editcolor'>确定报名</a>&nbsp;"
                //     );
                // };
                return row;
            },
            // 初始化表格数据
            initTable: function (pageSize) {
                var self = this;
                //DataTable是引入的函数
                $("#modelTable").DataTable({
                    paging: true, //分页
                    serverSide: true, //开启后端分页
                    pagingType: "full_numbers", //分页样式的类型simple/simple_numbers/full/full_numbers
                    pageLength: pageSize, //定义初始的页长
                    processing: true,
                    destroy: true, //允许销毁替换，在表格重新查询时，可以自动销毁以前的data
                    lengthChange: true, //控制是否能够调整每页的条数
                    lengthMenu: [5, 10, 25, 50], // 控制页长(页码的选择)
                    searching: true,
                    "data-show-refresh": true,
                    ordering: true,
                    autoWidth: true,
                    ajax: function (data, callback, settings) {
                        // 从data获取查询数据，包装searchBean
                        var columnIndex = data.order[0].column;//当前操作列的下标
                        var direction = data.order[0].dir;
                        var orderBy = data.columns[columnIndex].name;
                        pageSize = data.length == undefined ? pageSize : data.length;

                        self.searchBean.currentPage = data.start / pageSize + 1;//当前页
                        self.searchBean.pageSize = pageSize;
                        self.searchBean.orderBy = orderBy;
                        self.searchBean.direction = direction;
                        self.searchBean.keyWord = data.search.value;

                        $.ajax({
                            url: "/api/grades",
                            type: "post",
                            contentType: "application/json",
                            data: JSON.stringify(self.searchBean),
                            success: function (rs) {
                                if (!rs) {
                                    layer.alert("请求出错，请稍后重试" + rs.errmsg, {icon: 2});
                                    callback(self.tableData);
                                    return;
                                }
                                if (rs.list == null) {
                                    $("#moduleTable tbody tr").remove();
                                    $("#loading").remove();
                                    callback(self.tableData);
                                    return;
                                }
                                $("#loading").remove();
                                //定义一个数组来装行数据
                                var rowsData = [];
                                $.each(rs.list, function (i, item) {
                                    //调用定义行数据的函数，包装行数据
                                    var rowData = self.rowData(
                                        // item.id,
                                        item.subject,
                                        item.totalScore,
                                        item.score,
                                        item.totalTime,
                                        item.spendTime
                                    );
                                    // 将行数据放到数组里
                                    rowsData.push(rowData);
                                });
                                //赋值给表格的数组结构
                                self.tableData.data = rowsData;
                                self.tableData.recordsTotal = rs.total;
                                self.tableData.recordsFiltered = rs.total;
                                callback(self.tableData);
                            },
                            error: function (data) {
                                layer.alert(data.responseText, {icon: 0});
                            },
                        });
                    },
                    //列的定义
                    columns: [
                        //定义行数据字段
                        // {data: "id", name: "id", sortable: true},//可排序
                        {data: "subject", name: "subject", sortable: true},
                        {data: "totalScore", name: "total_score", sortable: true},
                        {data: "score", name: "score", sortable: true},
                        {data: "totalTime", name: "total_time", sortable: true},
                        {data: "spendTime", name: "spend_time", sortable: true}
                        // {data: "operate", width: "80px", sortable: false},
                    ],
                });
            },
            insertApproval:function (object) {
                var paperId = $(object).parent().parent().find("td").eq(0).text();
                $.ajax({
                    url:"/api/approval/" + paperId,
                    type:"get",
                    success:function (result) {
                        layer.alert(result.message, {icon: 0});
                    }
                })
            }
        },
        created:function(){
            window.insertApproval = this.insertApproval;
        },
        mounted:function () {
            this.initTable(this.defaultPageSize);
        },
    });
</script>
<!--Middle container End-->